<template>
  <div>
    <el-upload
      action="#"
      :limit="limit"
      :file-list="fileList"
      :on-remove="handleRemove"
      :http-request="handleUpload"
      :on-change="handleChange"
      :before-upload="beforeUpload"
    >
    <div class="imgUpload">
      <el-button style="border:1px dashed rgba(0,0,0,.3)" class="imgButton" :class="{ disabled: fileComputed }">点击上传</el-button>
      <!-- <i class="el-icon-close iconclass"></i> -->
    </div>

    </el-upload>
  </div>
</template>
<script>
import COS from 'cos-js-sdk-v5' // 导入腾讯云的包(sdk)
const cos = new COS({
  SecretId: 'AKIDYyDG7mEUXO2Uo03uPvFNK7jAQUM3b1HN', // 身份识别ID
  SecretKey: '2vgIk4DCzb2JPK6mMo9OsEUccTCoFXfd' // 身份秘钥
})
export default {
  props: {
    limit: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      fileList: [
        // { name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }
      ]
    }
  },
  computed: {
    // 设定一个计算属性 判断是否已经上传完了最大限度的长度
    fileComputed () {
      return this.fileList.length >= this.limit
    }
  },
  methods: {
    handleRemove (file, fileList) {
      // fileList解构中的fileList
      // this.fileList 数据中的fileList
      this.fileList = [...fileList]
      // console.log(fileList, this.fileList)
    },
    handleChange (file, fileList) {
      // console.log(file)
      // console.log(fileList)
      this.fileList = [...fileList]
    },
    // 上传文件时校验
    beforeUpload (file) {
      const isLt4M = file.size / 1024 / 1024 < 7
      // console.log(111)
      if (this.fileList.length === this.limit) {
        this.$message.success('上传成功~每个选项仅能上传一张图片哦~')
      }

      if (!isLt4M) {
        this.$message.error('上传头像图片大小不能超过 7MB!')
      }
      return isLt4M
    },
    // 上传的存储桶
    handleUpload (obj) {
      // console.log(obj.file)
      if (obj.file) {
        cos.putObject(
          {
            Bucket: 'hrsaas0602-1310341187' /* 填入您自己的存储桶，必须字段 */,
            Region: 'ap-nanjing' /* 存储桶所在地域，例如ap-beijing，必须字段 */,
            Key:
              parseInt(Math.random() * 10000) +
              '-' +
              obj.file
                .name /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */,
            StorageClass: 'STANDARD',
            Body: obj.file, // 上传文件对象
            // 正在上传时的回调函数
            onProgress: (progressData) => {
              // console.log(JSON.stringify(progressData))
              const img = this.fileList.find((i) => i.uid === obj.file.uid)
              img.status = 'uploading'
              img.percentage = parseInt(progressData.percent * 100)
            }
          },
          (err, data) => {
            // console.log(data)
            // console.log(err)
            if (err) { console.log(err) }
            const img = this.fileList.find((i) => i.uid === obj.file.uid)
            setTimeout(() => {
              img.status = 'success'
              img.url = 'http://' + data.Location
            }, 500)
          }
        )
      }
    }
  }
}
</script>
<style lang="less" scoped>
.imgUpload{
    width: 100px;
    max-height: 60px;
    position: relative;

  .imgButton{
    width: 100px;
    height: 60px;
  }
  .el-icon-close{
      width: 16px;
      height: 16px;
      font-size: 8px;
      border: 1px solid rgba(0,0,0,.3);
      border-radius: 50%;
      position: absolute;
      right: -8px;
      top:-8px;
    }
}
</style>
